<template>
	<view class="bg min100" style="padding-bottom:118rpx;">
		<view class="status_bar"></view>

		<view class="back">
			<image src="../../static/back.png" @click="handleBack"></image>
		</view>
		<view>
			<!-- 头部 -->
			<!-- <view class="image-wrap"> -->
			<image :src="info.images" class="collectImg" mode="aspectFill"></image>
			<!-- </view> -->
			<view class="plr-20 mt-30">
				<view class="topWrap white">
					<view>
						<view class="size-34 mb-20">
							{{info.name}}
						</view>
						<view class="flex flex-start size-22">
							<view class="tipsLeft bg-gold color-1a ptb-4 plr-10 radius-4">
								{{info.goods_category_name}}
							</view>
							<view class="tipsRight gold ptb-4 plr-10 radius-4" v-if="info.label">
								{{info.label}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 	<view class="flex flex-start bg-1 plr-30 ptb-30 size-24 gray-2 mb-30">
				<image src="" class="userImg mr-20"></image>
				<view class="">
					<view class="">
						创作者
					</view>
					<view class="mt-10 white">
						名字
					</view>
				</view>
			</view> -->
			<!-- 介绍 -->
			<view class="plr-20">
				<view class="mt-30 plr-30 ptb-30 radius-16" style="background: #fff;">
					<view class="mb-30 size-30 color-c"
						style="background: linear-gradient(0deg, #EEA634 0%, #DE2D32 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">
						合成材料</view>
					<empty v-if="info.goods.length==0"></empty>
					<view class="" v-else>
						<view class="gray-2 ptb-20" style="border-bottom:1rpx solid #f5f5f5"
							v-for="(item,index) in info.goods" :key="index">
							<view class="flex flex-1">
								<view class="flex">
									<image style="width:80rpx;height:80rpx;" :src="item.image" mode="aspectFill">
									</image>
									<view class="ml-20">
										<view class="mb-20 bold white">
											{{item.name}}
										</view>
										<view>
											价值：<text class="white">￥{{item.price}}</text>
										</view>
									</view>
								</view>
								<view class="white" v-if="item.users_number >= item.number">
									({{item.users_number}}/{{item.number}})
								</view>
								<view class="gray-2" v-else="">
									({{item.users_number}}/{{item.number}})
								</view>
							</view>
							<view class="flex1 flex-wrap">
								<view class="flex1 mt-20 flex-middle mr-20" v-for="(em,ind) in item.goods_number_f"
									:key="em.id" @click="changeItem(item,em)">
									<view class="white mr-20">编号：{{ em.number_f }}</view>
									<image src="/static/select-pink.png" mode="" class="selectImg" v-if="em.checked">
									</image>
									<image src="/static/select.png" mode="" class="selectImg" v-else></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 介绍 -->
			<view class="mt-30 plr-20 ptb-30" v-if="info.content">
				<view class="mb-30 size-30 white">
					作品故事
				</view>
				<view class="white infoWrap" v-html="info.content">

				</view>
			</view>
		</view>
		<view class="btmWrap flex flex-between pb-60 pt-20 plr-30" v-if="info.status == 1">
			<u-button class="button" @click="toCompose" :disabled="btnDisabled" hover-class="none"
				v-if="info.is_forge==1">立即锻造</u-button>
			<u-button class="gary" :disabled="true" hover-class="none" v-if="info.is_forge==0">材料不足</u-button>
		</view>
		<view class="btmWrap flex flex-between pb-60 pt-20 plr-30" v-if="info.status == 2">
			<u-button class="gary" disabled hover-class="none">{{ info.status_text }}</u-button>
		</view>
		<view class="btmWrap flex flex-between pb-60 pt-20 plr-30" v-if="info.status == 2">
			<u-button class="gary" disabled hover-class="none">{{ info.status_text }}</u-button>
		</view>
		<view class="btmWrap flex flex-between pb-60 pt-20 plr-30" v-if="info.status == 4">
			<u-button class="gary" disabled hover-class="none">
				{{ info.status_text }}
				<u-count-down :timestamp="info.diff_time" bg-color="background:transparent" color="#ffffff"
					font-size="24" separator-color="#ffffff" style="margin-left: 5rpx" @end="endTime"></u-count-down>
			</u-button>
		</view>

		<!-- 成功 -->
		<u-popup v-model="successShow" mode="center" class="bg" border-radius="30" width="500rpx">
			<view class="successWrap text-center size-24 pb-50">
				<image :src="successConfig.image" class="getImg radius-20"></image>
				<view class="mt-30 mb-20 white">
					{{successConfig.name}}
				</view>
				<view class="gray-2">
					价值：<text class="red">￥{{successConfig.price}}</text>
				</view>
			</view>
		</u-popup>
		<!-- 失败 -->
		<u-popup v-model="failShow" mode="center" class="bg" border-radius="30" width="500rpx">
			<view class="failWrap text-center size-24 white pb-50">
				很遗憾，祝您下次好运！
			</view>
		</u-popup>
		<!-- 动图 -->
		<u-mask :show="gifShow" @click="gifShow = false">
			<view class="openGif">
				<image class="gifImg" :src="gifUrl"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue"
	export default {
		components: {
			empty
		},
		data() {
			return {
				btnDisabled: false,
				gifUrl: "../../static/stuff.gif",
				gifShow: false, //盲盒动图
				successConfig: {},
				failShow: false,
				successShow: false,
				id: '',
				info: {
					goods: []
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.getDetails()
		},
		onHide() {
			this.successShow = false;
			this.failShow = false;
		},
		methods: {
			endTime() {
				this.getDetails()
			},
			getDetails() {
				this.$http('api/forge/forgeDetail', {
					id: this.id
				}).then(res => {
					res.goods.forEach(item => {
						item.goods_number_f.forEach((em, index) => {
							em.checked = false
						})
					})
					this.info = res;
				})
			},
			changeItem(item, em) {
				if (item.goods_number_f.filter(item => item.checked).length >= item.number) {
					em.checked = false
				} else {
					em.checked = !em.checked
				}
			},
			handleBack() {
				if (getCurrentPages().length === 1) {
					uni.switchTab({
						url: '/pages/home/index',
					})
				} else {
					uni.navigateBack()
				}
			},
			// 合成
			toCompose() {
				let ids = []
				let bool = []
				this.info.goods.forEach(item => {
					let id = []
					item.goods_number_f.forEach(data => {
						data.checked ? ids.push(data.id) : ''
						data.checked ? id.push(data.id) : ''
					})
					bool.push(id.length >= item.number)
				})
				if (!bool.every(item => item)) return uni.showToast({
					title: '选择材料数量不足',
					icon: "none"
				})
				this.$http('api/forge/forge', {
					id: this.id,
					ids: ids.join(',')
				}).then(res => {
					this.gifShow = true;
					this.btnDisabled = false;
					setTimeout(() => {
						this.gifShow = false;
						this.gifUrl = `../../static/stuff.gif?${new Date().getTime()}`
						if (res.is_success == 1) {
							uni.showToast({
								title: "锻造成功!",
								icon: "none"
							})
							this.successShow = true;
							this.successConfig = res;
						} else {
							uni.showToast({
								title: "锻造失败!",
								icon: "none"
							})
							this.failShow = true;
						}
						setTimeout(() => {
							uni.navigateTo({
								url: "../my/myChip"
							})
						}, 2000)
					}, 4000)
				})
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f5f5f5;
	}

	.white {
		color: #3c3c3c;
	}

	.gold {
		color: #9c8b66;
	}

	.back {
		position: relative;
		height: 0;

		image {
			position: absolute;
			width: 20rpx;
			height: 36rpx;
			top: 30rpx;
			left: 30rpx;
			z-index: 99;
		}
	}

	.collectImg {
		width: 100%;
		height: 480rpx;
	}

	.userImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}


	.btmWrap {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 10;
		background: #fff;
		// background: brown;
		height: 118rpx;
		box-sizing: border-box;
		padding: 15rpx 30rpx;

		.button {
			background: linear-gradient(90deg, #EEA634, #DE2D32);
		}

		.button,
		.gary {
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			padding: 0;
			margin: 0;
			line-height: 88rpx;
			height: 88rpx;
			color: #fff;
			border-radius: 44rpx;

			&::after {
				border: none;
			}
		}

		.gary {
			background: #AAAAAA;
		}
	}

	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}

	.infoWrap {

		/deep/ img {
			width: 100% !important;
			height: auto;
		}
	}

	/deep/ .u-btn--primary--disabled {
		background: #DEE4E8 !important;
	}

	.successWrap {
		background: url(../../static/success.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 622rpx;
		padding-top: 234rpx;
	}

	.failWrap {
		background: url(../../static/fail.png) 0 0 no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 412rpx;
		padding-top: 278rpx;
	}

	.getImg {
		width: 240rpx;
		height: 240rpx;
		background: #999;
	}

	/deep/ .u-mode-center-box {
		background-color: transparent;
	}

	.openGif {
		width: 620rpx;
		height: 620rpx;
		margin: 400rpx auto 0;

		.gifImg {
			width: 620rpx;
			height: 620rpx;
		}
	}

	.selectImg {
		width: 32rpx;
		height: 32rpx;
		display: block;
		filter: brightness(0.1);
	}
</style>
